<template>
  <div id="left2" style="width: 440px;height:300px;left: 10px;top: 10px"></div>
</template>

<script>
export default {
  data() {
    return {}
  },
  created() {
  },
  mounted() {
    this.left2()
  },
  methods: {
    left2() {
      let echarts = require('echarts')
      var chartDom = document.getElementById('left2');
      var myChart = echarts.init(chartDom, 'dark');
      var option;

      option = {
        tooltip: {
          trigger: 'item',
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2.,
            },
            label: {
              show: false,
              position: 'center',

            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 1587, name: '五级警告次数'},
              {value: 1527, name: '四级警告次数'},
              {value: 1527, name: '三级警告次数'},
              {value: 1617, name: '二级警告次数'},
              {value: 1417, name: '一级警告次数'}
            ]
          }
        ]
      };

      option && myChart.setOption(option);

    }
  }
}
</script>

<style scoped>

</style>
